<template>
    <div>
        <panle title='客户列表' content="客户列表"></panle>
        <!--标签-->
        <div>
            <div class="first_content">
                <!--筛选条件-->
                <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
                    <el-form-item label="客户名称">
                        <el-input size="mini" placeholder="请输入客户名称" v-model="form.khname"></el-input>
                    </el-form-item>

                    <el-form-item label="添加员工">
                        <el-select size="mini" multiple filterable v-model="form.assistant" placeholder="请选择">
                            <el-option v-for="item in assistantData" :key="item.userid" :label="item.name"
                                       :value="item.userid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="跟进状态">
                        <el-select size="mini" v-model="form.level" placeholder="请选择">
                            <el-option v-for="item in levelForm" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="企业标签">
<!--                        <el-select size="mini" v-model="form.qwtype" placeholder="请选择">
                            <el-option v-for="item in qwtypeForm" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>-->
                        <el-cascader
                            size="mini"
                            v-model="selectedValue"
                            :options="options"
                            :show-all-levels="false"
                            @change="handleChange"></el-cascader>
                        <el-button  v-bind:disabled="isDisabled" type="primary" size="mini" @click="chose_biaoqian">选择标签</el-button>
                    </el-form-item>
                    <el-form-item label="获客渠道">
                        <el-select size="mini" v-model="form.source" placeholder="请选择">
                            <el-option v-for="item in sourceForm" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="添加时间" prop="create_time">
                        <el-date-picker
                            v-model="form.create_time"
                            type="daterange"
                            align="right"
                            size="mini"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="流失状态" prop="loss_type">
                        <el-select size="mini" v-model="form.loss_type" placeholder="请选择">
                            <el-option v-for="item in lossForm" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="流失时间" prop="loss_time">
                        <el-date-picker
                            v-model="form.loss_time"
                            type="daterange"
                            align="right"
                            size="mini"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="删人状态" prop="is_del">
                      <el-select size="mini" v-model="form.is_del" placeholder="请选择">
                        <el-option v-for="item in delForm" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search" size="mini">搜索</el-button>
                        <el-button @click="resetForm('form')" size="mini">重置</el-button>
                        <el-button size="mini" @click="init()">刷新</el-button>
                    </el-form-item>
                    <div class="searchbar">
                        <el-row class="pt20">
                            <el-col :span="24" style="text-align: right;">
                                <el-button type="primary" size="mini" @click="batchSyncConfirm(0, 50)" :loading="loadinggroup">同步0-50</el-button>
                                <!--<el-button type="primary" size="mini" @click="batchSyncConfirm(51, 100)" :loading="loadinggroup">同步51-100</el-button>-->
                                <!--<el-button type="primary" size="mini" @click="batchSyncConfirm(101, 150)" :loading="loadinggroup">同步101-150</el-button>-->
                                <!--<el-button type="primary" size="mini" @click="batchSyncConfirm(151, 200)" :loading="loadinggroup">同步151-200</el-button>-->
                                <!--<el-button type="primary" size="mini" @click="batchSyncConfirm(201, 250)" :loading="loadinggroup">同步201-250</el-button>-->
                                <!--<el-button type="primary" size="mini" @click="batchSyncConfirm(251, 300)" :loading="loadinggroup">同步251-300</el-button>-->
                            </el-col>
                        </el-row>
                    </div>
                </el-form>

                <!--选择  包含的 企业标签  含有标签3  -->
                <el-dialog v-dialogDrag :visible.sync="xuan_biaoqian_open" width="60%" height="600px" append-to-body title="选择标签">
                    <div class="biaoqian_content">
                        <!--选择员工-->
                        <div class="biaoqian_left_content">
<!--                            <div class="biaoqian_left_content_title">-->
<!--                                <el-input placeholder="请输入关键字" v-model="addbiaoqianform2.title"></el-input>-->
<!--                                <el-button type="primary" size="mini" @click="querybiaoqian_qiye">查询</el-button>-->
<!--                                <el-button size="mini" @click="resetbiaoqian_qiye">重置</el-button>-->
<!--                            </div>-->
                            <div class="biaoqian_left_content_content">
                                <div class="biaoqian_left_content_content_item" v-for="item in biaoqianlist_qiye"
                                     :key="item.groups.id">
                                    <div class="biaoqian_left_content_content_item_title">{{ item.groups.name }}</div>
                                    <div class="biaoqian_left_content_content_item_content2">
                                        <div class="biaoqian_left_content_content_item_content" v-for="item2 in item.tags"
                                             :key="item2.id">
                                            <div @click="clickbiaoqian_qiye(item.groups, item2)"
                                                 :class="item2.click == 1 ? 'biaoqian_left_content_content_item_content_title2' : 'biaoqian_left_content_content_item_content_title'">
                                                {{ item2.name }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--已选标签-->
                        <div class="biaoqian_right_content">
                            <div>已选 {{ biaoqianlist_hav_count_qiye }}</div>
                            <div class="biaoqian_right_content_item">
                                <div class="biaoqian_right_content_item_top">点击删除</div>
                                <div class="biaoqian_right_content_item_contnet">
                                    <div @click="clickbiaoqiandel_qiye(item2.groups, item2.tags, index2)"
                                         class="biaoqian_left_content_content_item_content_title"
                                         v-for="(item2, index2) in biaoqianlist_hav_qiye" :key="index2">
                                        {{ item2.tags.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="xuan_biaoqian_open = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="submitbiaoqianForm" size="small">确
                            定</el-button>
                    </div>
                </el-dialog>

                <!--贴  包含的 企业标签  含有标签3  -->
                <el-dialog v-dialogDrag :visible.sync="tie_biaoqian_open" width="60%" height="600px" append-to-body title="选择标签">
                    <div class="biaoqian_content">
                        <!--选择员工-->
                        <div class="biaoqian_left_content">
                            <!--                            <div class="biaoqian_left_content_title">-->
                            <!--                                <el-input placeholder="请输入关键字" v-model="addbiaoqianform2.title"></el-input>-->
                            <!--                                <el-button type="primary" size="mini" @click="querybiaoqian_qiye">查询</el-button>-->
                            <!--                                <el-button size="mini" @click="resetbiaoqian_qiye">重置</el-button>-->
                            <!--                            </div>-->
                            <div class="biaoqian_left_content_content">
                                <div class="biaoqian_left_content_content_item" v-for="item in tiebiaoqianlist_qiye"
                                     :key="item.groups.id">
                                    <div class="biaoqian_left_content_content_item_title">{{ item.groups.name }}</div>
                                    <div class="biaoqian_left_content_content_item_content2">
                                        <div class="biaoqian_left_content_content_item_content" v-for="item2 in item.tags"
                                             :key="item2.id">
                                            <div   @click="tie_clickbiaoqian_qiye(item.groups, item2)"
                                                 :class="item2.click == 1 ? 'biaoqian_left_content_content_item_content_title2' : 'biaoqian_left_content_content_item_content_title'">
                                                {{ item2.name }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--已选标签-->
                        <div class="biaoqian_right_content">
                            <div>已选 {{ biaoqianlist_hav_count_qiye }}</div>
                            <div class="biaoqian_right_content_item">
                                <div class="biaoqian_right_content_item_top">点击删除</div>
                                <div class="biaoqian_right_content_item_contnet">
                                    <div @click="clickbiaoqiandel_qiye(item2.groups, item2.tags, index2)"
                                         class="biaoqian_left_content_content_item_content_title"
                                         v-for="(item2, index2) in biaoqianlist_hav_qiye" :key="index2">
                                        {{ item2.tags.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="tie_biaoqian_open = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="tiesubmitbiaoqianForm" size="small">确 定</el-button>
                    </div>
                </el-dialog>

                <div class="first_table">
                    <el-table :data="tableDatagroup" style="width: 100%;margin-bottom: 20px;"  border stripe
                              default-expand-all v-loading="loadinggroup">
<!--                        <el-table-column type="selection" width="45"></el-table-column>-->
<!--                        <el-table-column prop="id" label="ID" width="55"></el-table-column>-->
                        <el-table-column prop="name" label="客户名称"></el-table-column>
                        <el-table-column prop="sex" label="性别"></el-table-column>
                        <el-table-column prop="grTag" label="个人标签"></el-table-column>
                        <el-table-column prop="qwTag" label="企业标签"></el-table-column>
                        <el-table-column prop="zjname" label="添加员工"></el-table-column>
                        <el-table-column prop="channel" label="获客渠道"></el-table-column>
                        <el-table-column prop="levell" label="跟进状态"></el-table-column>
                        <el-table-column prop="createtime" label="添加时间"></el-table-column>
                        <el-table-column prop="losstype" label="流失状态"></el-table-column>
                        <el-table-column prop="deltype" label="删人状态"></el-table-column>
                        <el-table-column prop="phone" label="绑定手机号"></el-table-column>

                        <el-table-column prop="id" label="操作" align="center" header-align="center">
                            <template slot-scope="scope">
                              <el-row>
                                <PersButton type="text" size="mini" label="贴标签"  perms="scrm:client:list:biaoqian" @click='tiechose_biaoqian(scope.row)'></PersButton>
                                <PersButton type="text" size="mini" label="编辑"  perms="scrm:client:list:edit" @click='editgroup(scope.row)'></PersButton>
                              </el-row>
                              <el-row>
                                <PersButton type="text" size="mini" label="标签详情"  perms="scrm:client:list:tagInfo" @click='tagInfo(scope.row)'></PersButton>
                                <PersButton v-if="scope.row.isdel == 0" type="text" size="mini" label="同步" perms="scrm:client:list:tagInfo" @click="syncConfirm(scope.row)"></PersButton>
                              </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChangegroup" @current-change="handleCurrentChangegroup"
                                       :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize"
                                       background layout="total, sizes, prev, pager, next, jumper" :total="form.total">
                        </el-pagination>
                    </div>
                </div>
                <!--弹出层  编辑客户-->
                <el-dialog v-dialogDrag :visible.sync="opengroup" width="600px" append-to-body
                           :title="'编辑客户'">
                    <el-form ref="form" :model="formgroup"  label-width="80px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="年龄" prop="age">
                                    <el-input style="width:50%" v-model="formgroup.age" placeholder="请输入年龄" size="small" />
                                </el-form-item>
                                <el-form-item label="生日" prop="birthday">
                                    <el-date-picker
                                        v-model="formgroup.birthday"
                                        type="date"
                                        placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="手机号" prop="phone">
                                    <el-input style="width:50%" v-model="formgroup.phone" placeholder="请输入手机号" size="small" />
                                </el-form-item>
                                <el-form-item label="地址" prop="address">
                                    <el-input style="width:50%" v-model="formgroup.address" placeholder="请输入地址" size="small" />
                                </el-form-item>
                                <el-form-item label="客户级别" prop="level">
                                    <el-select size="small" v-model="formgroup.level" placeholder="请选择">
                                        <el-option v-for="item in levelForm" :key="item.value" :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
<!--                                <el-form-item label="客户来源" prop="source">-->
<!--                                    <el-select size="mini" v-model="formgroup.source" placeholder="请选择">-->
<!--                                        <el-option v-for="item in sourceForm" :key="item.value" :label="item.label"-->
<!--                                                   :value="item.value">-->
<!--                                        </el-option>-->
<!--                                    </el-select>-->
<!--                                </el-form-item>-->
                                <el-form-item label="收入" prop="shouru">
                                    <el-input style="width:50%" v-model="formgroup.shouru" placeholder="请输入收入" size="small" />
                                </el-form-item>
                                <el-form-item label="工作" prop="job">
                                    <el-input style="width:50%" v-model="formgroup.job" placeholder="请输入工作" size="small" />
                                </el-form-item>
<!--                                <el-form-item label="意向" prop="yixiang">-->
<!--                                    <el-select size="small" v-model="formgroup.yixiang" placeholder="请选择">-->
<!--                                        <el-option v-for="item in levelForm" :key="item.value" :label="item.label"-->
<!--                                                   :value="item.value">-->
<!--                                        </el-option>-->
<!--                                    </el-select>-->
<!--                                </el-form-item>-->
                                <el-form-item label="备注" prop="remark">
                                    <el-input style="width:50%" v-model="formgroup.remark" placeholder="请输入备注" size="small" />
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="opengroup = false" size="small">取 消</el-button>
                        <el-button type="primary"
                                   @click="subEditFormgroup(formgroup)" size="small">确定</el-button>
                    </div>
                </el-dialog>
              <!--弹出层  标签详情-->
              <el-dialog v-dialogDrag :visible.sync="opengroupsub" width="600px" append-to-body :title="'查看标签详情'">
                <div class="first_table">
                  <el-table :data="clientTags" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all v-loading="loadinggroupsub">
                    <el-table-column prop="tag_name" label="名称"></el-table-column>
                    <el-table-column prop="id" label="操作">
                      <template slot-scope="scope">
                        <PersButton type="text" size="mini" icon="el-icon-delete" perms="scrm:tag:list:delsub"
                                    label="删除" @click="delTag(scope.row)"></PersButton>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="block">
                    <el-pagination @size-change="handleSizeChangegroups"
                                   @current-change="handleCurrentChangegroups"
                                   :current-page="pageNumbergroup" :page-sizes="[10, 50, 100, 200]"
                                   :page-size="pageSizegroup"
                                   background layout="total, sizes, prev, pager, next, jumper"
                                   :total="totalgroup">
                    </el-pagination>
                  </div>
                </div>
              </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import VueJsonExcel from "vue-json-excel";
import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {getList,getAssistant,getTagList,markTag,getClientIdList,getClientDetail,editClient,getClientTags} from '@/api/scrm/client/clientList';
import {hasPermission, isShow} from '@/common/permission'
import {
    querybiaoqian_qiye,
} from '@/api/scrm/qunfa/qunfa';
import { dateFormat } from "@/utils";
import {editYanjincigroup} from "@/api/live/yanjincigroup";
import {getQwTagSub} from "@/api/scrm/tag/tag";

export default {
    components: {
        VueJsonExcel,
        Panle,
        PersButton
    },
    data() {
        return {
            sync_type: 0,
            sync_number: 100,
            sync_time: 0,
            loadinggroup: false,
            tableDatagroup: [],
            assistantData: [],
            xuan_biaoqian_open:false,
            tie_biaoqian_open:false,
            addbiaoqianform2: {
                title: ''
            },
            tiebiaoqianlist_qiye: [],
            biaoqianlist_qiye: [],
            biaoqianlist_hav_qiye: [],
            biaoqianlist_hav_count_qiye: 0,
            zhujiao: '',
            externalUserid: '',
            isDisabled: false,
            selectedValue:[],
            opengroup: false,
            clientTags:[],
            opengroupsub:false,
            totalgroup: 0,
            pageSizegroup: 10,
            pageNumbergroup: 1,
            loadinggroupsub: false,
            formgroup: {
                job: '',
                yixiang: '',
                shouru: '',
                source: '',
                level: '',
                remark: '',
                address: '',
                age: '',
                birthday: '',
                phone: '',
            },
            form: {
                khname: '',
                loss_type: '',
                is_del: '',
                level: '',
                source: '',
                create_time: [dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00', dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59'],
                loss_time: '',
                userid: '',
                assistant: '',
                qwtype: '',
                tags: [],
                pageSize: 10,
                pageNumber: 1,
                total: 0,
            },
            levelForm: [{
                value: 1,
                label: '新客户'
            }, {
                value: 2,
                label: '初步沟通'
            }, {
                value: 3,
                label: '意向客户'
            }, {
                value: 4,
                label: '付款客户'
            }, {
                value: 5,
                label: '无意向客户'
            }],
            sourceForm: [{
                value: 1,
                label: '公域'
            }, {
                value: 2,
                label: '抖音'
            }, {
                value: 3,
                label: '小红书'
            }, {
                value: 4,
                label: '视频号'
            }, {
                value: 5,
                label: '快手'
            }],
            lossForm: [{
                value: 1,
                label: '未流失'
            }, {
                value: 2,
                label: '已流失'
            }],
            delForm: [{
                value: 1,
                label: '未删除'
            }, {
                value: 2,
                label: '已删除'
            }],
            qwtypeForm: [{
                value: 1,
                label: '满足其一'
            }, {
                value: 2,
                label: '同事满足'
            }, {
                value: 2,
                label: '无标签'
            }],
            options: [{
                value: '1',
                label: '包含企业标签',
                children: [{
                    value: '11',
                    label: '满足其一'
                }, {
                    value: '12',
                    label: '同时满足'
                }]

            }, {
                value: '2',
                label: '不包含企业标签',
            }, {
                value: '13',
                label: '无标签'
            }],

            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
        }
    },
    created() {
        const now = new Date()
        this.sync_time = now.getTime()
        this.init();
        getAssistant().then((res) => {
            this.assistantData = res.data.userlist;
        });
        querybiaoqian_qiye(this.addbiaoqianform2).then((res) => {
            this.biaoqianlist_qiye = res.data.data;
        })
    },
    methods: {
        hasPermission,
        isShow,

        init: function () {
            this.loadinggroup = true;
            getList(this.form).then((res) => {
                this.tableDatagroup = res.data.list;
                this.form.total = res.data.total;
                this.loadinggroup = false;
            })
        },
        handleSizeChangegroups: function (e) {
          this.pageSizegroup = e;
          this.init();
        },
        handleCurrentChangegroups: function (e) {
          this.pageNumbergroup = e;
          this.init();
        },
  //---------------- 企业标签选择器 --------------------------------------
        querybiaoqian_qiye(){
            querybiaoqian_qiye(this.addbiaoqianform2).then((res) => {
                this.biaoqianlist_qiye = res.data.data;
            })
        },
        resetbiaoqian_qiye() {
            this.addbiaoqianform2 = {
                title: ''
            };
            this.init();
        },
        tie_clickbiaoqian_qiye(group, tag) {
            if (tag.type==0) {
                let a = {
                    groups: group,
                    tags: tag
                };

                if (this.biaoqianlist_hav_qiye.length > 0) {
                    var b = true;
                    this.biaoqianlist_hav_qiye.forEach(element => {

                        if (a.tags.tagid == element.tags.tagid) {
                            b = false;
                        }
                    });
                    if (b) {
                        this.biaoqianlist_hav_qiye.push(a);
                    }
                } else {
                    this.biaoqianlist_hav_qiye.push(a);
                }
                this.biaoqianlist_hav_count_qiye = this.biaoqianlist_hav_qiye.length;
                this.biaoqianlist_qiye[group.groupid]['tags'][tag.tagid].click = 1;
            }
        },
        clickbiaoqian_qiye(group, tag) {
            let a = {
                groups: group,
                tags: tag
            };

            if (this.biaoqianlist_hav_qiye.length > 0) {
                var b = true;
                this.biaoqianlist_hav_qiye.forEach(element => {

                    if (a.tags.tagid == element.tags.tagid) {
                        b = false;
                    }
                });
                if (b) {
                    this.biaoqianlist_hav_qiye.push(a);
                }
            } else {
                this.biaoqianlist_hav_qiye.push(a);
            }
            this.biaoqianlist_hav_count_qiye = this.biaoqianlist_hav_qiye.length;
            this.biaoqianlist_qiye[group.groupid]['tags'][tag.tagid].click = 1;

        },

        clickbiaoqiandel_qiye(group, tag, index) {
            this.biaoqianlist_hav_qiye.splice(index, 1);
            this.biaoqianlist_hav_count_qiye = this.biaoqianlist_hav_qiye.length;
            this.biaoqianlist_qiye[group.groupid]['tags'][tag.tagid].click = 0;
            this.form.tags = [];
            this.selectedValue = '';
        },

        submitbiaoqianForm() {
            this.biaoqianlist_hav_qiye.forEach(element => {
                this.form.tags.push(element.tags.tagid);
            });
            this.xuan_biaoqian_open = false;
        },
        chose_biaoqian() {
            this.xuan_biaoqian_open = true;
        },

        tiesubmitbiaoqianForm() {
            this.biaoqianlist_hav_qiye.forEach(element => {
                this.form.tags.push(element.tags.tagid);
            });
            let data = {
                'addtags': this.form.tags.join(","),
                'removetags': '',
                'zhujiao': this.zhujiao,
                'externalUserid': this.externalUserid,
            }
            markTag(data).then((res) => {
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init();
                } else {
                    this.msgError(res.msg);
                }
            })
            this.tie_biaoqian_open = false;
        },
        tiechose_biaoqian(row) {
            let tag = row.tagid.join(',');
            getTagList({'tag':tag,'externalUserid':row.external_userid,'zjuserid':row.zjuserid}).then((res) => {
                this.tiebiaoqianlist_qiye = res.data.tagData;
                this.zhujiao = res.data.zjuserid;
                this.externalUserid = res.data.externalUserid;
            })
            this.tie_biaoqian_open = true;
        },
//----------------------------------------------------------------
        handleChange(value) {
            this.form.qwtype = value[value.length-1];
            if (this.form.qwtype == 13) {
                this.isDisabled = true;
            }else {
                this.isDisabled = false;
            }
        },
        handleSizeChangegroup: function (e) {
            this.pageSize = e;
            this.init();
        },
        handleCurrentChangegroup: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.form.khname = ''
            this.form.loss_type = ''
            this.form.is_del = ''
            this.form.level = ''
            this.form.source = ''
            this.form.create_time = [dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00', dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59']
            this.form.loss_time = ''
            this.form.assistant = ''
            this.form.qwtype = ''
            this.selectedValue = ''
            this.form.tags = []
            this.isDisabled = false
            this.init();
        },
        async syncClient_a(){
            const res = await getClientIdList({
                page: 1,
            })
            console.log('员工列表：', res.data.follow_user)
            return res.data.follow_user
        },
        async syncClient_b(uid){
            const res = await getClientIdList({
                page: 2,
                userid: uid,
            })
            console.log('员工-客户列表：', res.data.external_userid)
            return res.data.external_userid
        },
        async syncClient_c(uid){
            if (this.sync_number <= 0) {
                this.sync_type = 1;
            } else if (this.sync_number >= 100) {
                this.sync_type = 0;
            }
            if (this.sync_type > 0) {
                // 同步
                const res = await getClientDetail({
                    external_userid: uid,
                })
                console.log('同步：', res)
            } else {
                // 异步
                this.sync_number--
                getClientDetail({
                    external_userid: uid,
                }).then(res => {
                    this.sync_number++
                    console.log('异步：', res)
                })
            }
            return false
        },
        syncConfirm(data){
            console.log(data)
            this.$confirm('确定同步【'+data.name+'】么?', '同步客户', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.syncClient(data.external_userid)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消同步客户'
                });
            });
        },
        async syncClient(data) {
            this.loadinggroup = true;
            await this.syncClient_c(data)
            this.$message.success('同步成功')
            this.loadinggroup = false
            this.init();
        },
        async batchSyncConfirm(index, max){
            console.log('--0--同步开始--')
            const userList = await this.batchSyncClientAsync()
            if (!userList) this.msgError('请先选择员工')
            console.log('--1--进入循环员工列表--', userList)
            await this.batchSyncClientForAsync(userList, index, max)

            // this.$confirm('此操作将耗时很久, 是否继续?', '批量同步客户', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // }).then(() => {
            //     console.log('--0--同步开始--')
            //     const userList = this.batchSyncClientAsync()
            //     if (!userList) this.msgError('请先选择员工')
            //     console.log('--1--进入循环员工列表--', userList)
            //     this.batchSyncClientForAsync(userList)
            // }).catch(() => {
            //     this.$message({
            //         type: 'info',
            //         message: '已取批量消同步客户'
            //     });
            // });
        },
        async batchSyncClientAsync() {
            const list = await getClientIdList({page: 1}).then(res => {
                return new Promise(resolve => {
                    resolve(res.data.follow_user)
                })
            })
            return new Promise(resolve => {
                resolve(list)
            })
        },
        async batchSyncClientForAsync(item, index, max) {
            const itemLength = item.length
            console.log('--2--循环员工列表--', itemLength)
            for (let i = 0; i < itemLength; i++) {
                console.log('--循环员工列表--'+i+'--', item[i])
                if (i < index) {
                    continue;
                }
                if (i >= max) {
                    continue;
                }
                const listId = await this.batchSyncClientIdAsync(item[i])
                if (listId.length > 0) {
                    const listIdLength = listId.length
                    console.log('--3--循环客户列表--', listIdLength)
                    for (let s = 0; s < listIdLength; s++) {
                        console.log('--循环客户列表--'+s+'--'+i+'--')
                        const desc = await this.batchSyncClientDescAsync(listId[s])
                        if (desc === 200) {
                            this.msgSuccess('同步成功')
                        } else {
                            this.msgError(desc.msg)
                        }
                    }
                }
            }
            this.loadinggroup = false
            this.init();
        },
        async batchSyncClientIdAsync(item) {
            const list = await getClientIdList({
                page: 2,
                userid: item
            }).then(res => {
                return new Promise(resolve => {
                    resolve(res.data.external_userid)
                })
            })
            return new Promise(resolve => {
                resolve(list)
            })
        },
        async batchSyncClientDescAsync(item) {
            const desc = await getClientDetail({'external_userid':item}).then(res => {
                return new Promise(resolve => {
                    resolve(res)
                })
            })
            return new Promise(resolve => {
                resolve(desc)
            })
        },
        batchSyncClient() {
            this.loadinggroup = true;

            getClientIdList({
                page: 1,
            }).then(res => {
                const user_list = res.data.follow_user
                user_list.forEach(item => {
                    getClientIdList({
                        page: 2,
                        userid: item
                    }).then(res => {
                        const list = res.data.external_userid
                        const total = list.length
                        if (total > 0) {
                            let keep = 0
                            list.forEach(item => {
                                getClientDetail({'external_userid':item}).then(res => {
                                    if (res.code === 200) {
                                        this.msgSuccess('同步['+item.name+']成功！')
                                    } else {
                                        this.msgError(res.msg)
                                    }
                                    keep++
                                    if (keep >= total) {
                                        this.loadinggroup = false
                                        this.init();
                                    }
                                })
                            })
                        }
                    })
                })

            })
        },
        editgroup: function (data) {
            this.formgroup.id = data.id;
            let editForm = {
                "job": data.job,
                "yixiang": data.yixiang,
                "shouru": data.shouru,
                "source": data.source,
                "level": data.level,
                "remark": data.remark,
                "address": data.address,
                "age": data.age,
                "birthday": data.birthday,
                "phone": data.phone,
            }
            Object.assign(this.formgroup, editForm);
            this.opengroup = true;
        },
        subEditFormgroup: function (e) {
            editClient(this.formgroup).then((res) => {
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init();
                    this.opengroup = false;
                } else {
                    this.msgError(res.msg);
                }
            })
        },
        tagInfo: function (data) {
          this.loadinggroupsub = true;
          let _param = {
            "pageSize": this.pageSizegroup,
            "pageNumber": this.pageNumbergroup,
            "external_userid": data.external_userid,
            "userid": data.zjuserid,
          }
          getClientTags(_param).then((res) => {
            this.clientTags = res.data.result;
            this.totalgroup = res.data.totalgroup;
          })
          this.opengroupsub = true;
          this.loadinggroupsub = false;
        },
        delTag(data) {
          let _param = {
            'addtags': '',
            'removetags': data.tag_id,
            'zhujiao': data.userid,
            'externalUserid': data.external_userid,
          }
          markTag(_param).then((res) => {
            if (res.code == 200) {
              this.msgSuccess(res.msg);
              this.init();
            } else {
              this.msgError(res.msg);
            }
            this.opengroupsub = false;
          })
        },
    },
}

</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.el-form-item {
    margin-bottom: 10px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.shaixuan {
    display: flex;
    flex-flow: nowrap;
    align-content: center;
    margin-top: 15px;
}

.first_content {
    display: flex;
    flex-flow: nowrap;
    flex-direction: column;
    align-content: center;
}

.uploadcol {
    display: flex;
    flex-flow: column;
    width: 100px;
}

.uploadborder {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    /* cursor: pointer;
      position: relative;
      overflow: hidden; */
    width: 100px;
    height: 100px;
}

.addshuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

.daorushuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 160px;
}

.yixuan {
    margin: 20px;
    color: #787878;
}

.biaoqian_content {
    display: flex;
    width: 100%;
}

.biaoqian_left_content {
    margin: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(241, 241, 241);
    display: flex;
    flex-direction: column;
    width: 60%;
    overflow-y: scroll;
    /* 启用垂直滚动 */
    max-height: 500px;
    overflow: auto;
    /* 隐藏滚动条 */
    padding: 20px;
}
.biaoqian_left_content_title {
    display: flex;
}
.biaoqian_left_content_content {
    display: flex;
    flex-direction: column;
}
.biaoqian_left_content_content_item {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
.biaoqian_left_content_content_item_title {
    font-weight: bold;
}
.biaoqian_left_content_content_item_content2 {
    display: flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.biaoqian_left_content_content_item_content {
    display: flex;
    padding: 2px;
    margin-left: 10px;
    margin-left: 10px;
}
.biaoqian_left_content_content_item_content_title2 {
    border-color: blue;
    border-width: 1px;
    border-style: solid;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}
.biaoqian_left_content_content_item_content_title {
    border-color: #dfdfdf;
    border-width: 1px;
    border-style: solid;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}

.biaoqian_right_content {
    margin: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(180, 180, 180);
    display: flex;
    flex-direction: column;
    width: 30%;
    overflow-y: scroll;
    /* 启用垂直滚动 */
    max-height: 500px;
    overflow: auto;
    /* 隐藏滚动条 */
    padding: 20px;
}
.biaoqian_right_content_item {
    display: flex;
    flex-direction: column
}
.biaoqian_right_content_item_top {
    margin-top: 10px;
    margin-bottom: 10px;
    color: red;
}
.biaoqian_right_content_item_contnet {
    display: flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 10px;
}
</style>